import React from 'react';

import { LessionDiv } from './styledHome'
import NavHead from '../../components/NavHead'
import { useHistory } from 'react-router-dom'

import bgImg1 from '@a/images/beike/lession_03.jpg'
import bgImg2 from '@a/images/beike/lession_04.jpg'
import bgImg3 from '@a/images/beike/lession_05.jpg'
import bgImg4 from '@a/images/beike/lession_06.jpg'


const LessonUi = (props) => {
    // console.log(props);
    let history = useHistory()

    return (
        <div>
            <NavHead title={'小学语文'}></NavHead>
            <LessionDiv bg={[bgImg1, bgImg2, bgImg3, bgImg4]}>
                <ul>
                    {
                        props.list.length>0 && props.list.map(v => {
                            return (
                                <li key={v.bookId} onClick={()=>history.push('/show',v.bookName)}>
                                    <div className='ClassBox'>
                                        <p> {v.bookName}</p>
                                        <span className='edit'>{v.banBen}</span>
                                    </div>
                                </li>
                            )
                        })
                    }
                    <li>
                        <div className='ClassBox'>
                            <p>其他年级</p>
                        </div>
                    </li>
                </ul>
            </LessionDiv>
        </div>
    );
}

export default LessonUi;


